<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时光购物嘉城</title>
	<!--	<link rel="stylesheet" type="text/css" href="css/sg_index.css" />报错：注意引入的外部css样式也需要放在jquery 和bootstrap之后-->
		<script src="bootstrap-3.3.5/js/jquery-3.1.1.js"></script>
		<script src="bootstrap-3.3.5/js/bootstrap.js"></script>		
		<link href="bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/sg_index.css" /><!--注意顺序很重要，必须先引用jquery.min.js文件，然后再引用botstrap的js-->
	</head>
	
<style>
	 div.item img{
	   width:100%;  
	  }
	 div#myCarousel{
	   top: 1px;
	   width:63%;
	   margin:0 auto;
	 } 
</style>

<!--    <script>
    	function showProductcategory(cid){
    		$("div.productcategory[cid="+cid+"]").show();
    	}
    	function hideProductcategory(cid){
    		$("div.productcategory[cid="+cid+"]").hide();
    	} 
$(function(){
    	$("div.eachcategory").mouseenter(function(){
    		var cid=$(this).attr("cid");
    		showProductcategory();
    	});
    	$("div.eachcategory").mouseleave(function(){
    		var cid=$(this).attr("cid");
    		hideProductcategory();
    	});
    	
    	$("div.productcategory").mouseenter(function(){
    		var cid=$(this).attr("cid");
    		showProductcategory();
    	});
    	$("div.productcategory").mouseleave(function(){
    		var cid=$(this).attr("cid");
    		hideProductcategory();
    	});
 });   	
    -->	

    <script>
function showProductsAsideCategorys(cid){
	
	$("div.productcategory[cid="+cid+"]").show();
}

function hideProductsAsideCategorys(cid){

	$("div.productcategory[cid="+cid+"]").hide();
}

$(function(){
    $("div.eachcategory").mouseenter(function(){
        var cid = $(this).attr("cid");
        showProductsAsideCategorys(cid);
    });
    $("div.eachcategory").mouseleave(function(){
        var cid = $(this).attr("cid");
        hideProductsAsideCategorys(cid);
    });
    $("div.productcategory").mouseenter(function(){
    	var cid = $(this).attr("cid");
    	showProductsAsideCategorys(cid);
    });
    $("div.productcategory").mouseleave(function(){
    	var cid = $(this).attr("cid");
    	hideProductsAsideCategorys(cid);
    });
});
</script>
	<body>
		<!--顶部导航栏-->
		<nav class="top"><!--<nav>标签表示明确意义的导航组-->
			<span class="pull-left"><!--区别：<span>是内联元素，可以嵌套在同一行，<div>是块级元素，需要另起一行-->
				<span><span class="glyphicon glyphicon-fire redColor"></span> 喵，欢迎来时光购物城</span>
				<a href="login.html">请登录</a>
				<a href="register.html">免费注册</a>
			</span>			
			<span class="pull-right">
				<a href="sg_index.html"><span class="glyphicon glyphicon-home redColor"></span> 首页</a>
				<a href="mobile.html">手机端</a>
				<a href="#"><span class="glyphicon glyphicon-user blackColor"></span> 个人中心</a><!--在<a>链接里面嵌套标签<span>-->
				<a href="shopCart.html"><span class="glyphicon glyphicon-shopping-cart redColor"></span>  购物车</a>
			</span>
		</nav>
	<!--	悬浮搜索框-->
	<div class="bor_search">
		<img src="img/logobig1.png">
			<div class="search">
				<input type="text" name="keyword" placeholder="请输入搜索关键字" />
				<button class="search-button" type="submit">搜索</button>
			</div>		
	</div>
	
<!--	中间包括轮播及上面的选购导航-->
<div class="categoryWithcarousel">
	<div class="headbar">
		<div class="head">
			
			<span class="glyphicon glyphicon-list"></span>
			<span>商品分类</span>
		</div>
		<div class="rightMenu">
			<span><a href="#">生鲜</a></span>
			<span><a href="#">团购</a></span>
			<span><a href="#">全球购</a></span>
			<span><a href="#">闪购</a></span>
		</div>
		<div class="nav-extra">
			 <span class="glyphicon glyphicon-grain"></span>
       		 <i class="mr-icon-user-secret mr-icon-md nav-user"></i><b>&nbsp;我的福利</b>
      		 <i class="mr-icon-angle-right" style="padding-left: 10px;">>></i>
        </div>
	</div>

<!--	轮播图-->
<div id="myCarousel" class="carousel" data-ride="carousel"><!--设计轮播图片的容器为class="carousel"-->
	  <ol class="carousel-indicators"><!--设计轮播图片计数器 class="caroousel-indicators"-->
			    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			    <li data-target="#myCarousel" data-slide-to="1"></li>
			    <li data-target="#myCarousel" data-slide-to="2"></li>
			    <li data-target="#myCarousel" data-slide-to="3"></li>
	  </ol>
  <!--设计轮播图片播放区，使用carousel-inner来控制， Wrapper for slides -->
 <div id="myCarousel" class="carousel" data-ride="carousel"><!--设计轮播图片的容器为class="carousel"-->
	  <ol class="carousel-indicators"><!--设计轮播图片计数器 class="caroousel-indicators"-->
			    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			    <li data-target="#myCarousel" data-slide-to="1"></li>
			    <li data-target="#myCarousel" data-slide-to="2"></li>
			    <li data-target="#myCarousel" data-slide-to="3"></li>
	  </ol>
  <!--设计轮播图片播放区，使用carousel-inner来控制， Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
		    <div class="item active">
		        <img src="img/zz1.jpg">
		        	<div class="carousel-caption">
							<h4>Number1</h4>
							<p>我的意中人是一个盖世英雄，有一天，他会驾着七彩祥云来娶我.....</p>
					</div>
		    </div>
		    <div class="item">
		        <img src="img/z1.jpg" >
		        	<div class="carousel-caption">
							<h4>Number2</h4>
							<p>紫霞</p>
					</div>
		    </div>
		    <div class="item">
		        <img src="img/b1.jpg" >
		        	<div class="carousel-caption">
							<h4>Number3</h4>
							<p>至尊宝</p>
					</div>
		    </div>
	    	<div class="item">
	        	<img src="img/hh1.jpg" >
	        		<div class="carousel-caption">
							<h4>Number4</h4>
							<p>哈哈哈哈哈</p>
					</div>
	    	</div>
  </div>
<!--  设计轮播图片控制器，向前播放"left carousel-control"控制，向后播放"right carousel-control"控制-->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
	<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<!--轮播图侧边导航-->

	<div class="categoryMenu">
		<div class="eachcategory" cid="100">
			<span class="glyphicon glyphicon-link"></span>
			<a>家用电器</a>
		</div>
			<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>手机数码</a>
		</div>
			<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>水果蔬菜</a>
		</div>
		<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>电脑电视</a>
		</div>
		<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>糖果蜜饯</a>
		</div>
		<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>海鲜河鲜</a>
		</div>
		<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>花茶果茶</a>
		</div>
			<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>家具家居</a>
		</div>
			<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>素食卤味</a>
		</div>
		<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>品牌礼包</a>
		</div>
		<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>坚果炒干</a>
		</div>
		<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>服装口红</a>
		</div>		
		<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>发饰首饰</a>
		</div>
			<div class="eachcategory">
			<span class="glyphicon glyphicon-link"></span>
			<a>贴纸卡通</a>
		</div>
	</div>
	<div class="productcategory" cid="100" style="display: none;">
	    	<div class="product-left">
	    		<span>生活电器</span>
	    		<hr style="height:3px;border:none;border-top:3px dashed #c9c3ad;" /> 
	    		&nbsp;&nbsp;<a>扫地机器人</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>熨斗</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>扫地机器人</a><br><br>
	    		&nbsp;&nbsp;<a>除湿机</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>加湿器</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>电子游戏机</a>
	    			
	    	</div>
	    	<div class="product-right">
	    		<span>厨房电器</span>
	    		<hr style="height:3px;border:none;border-top:3px dashed #c9c3ad;" /> 
	    		&nbsp;&nbsp;<a>电饭煲</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>电烤箱</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>微波炉</a><br><br>
	    		&nbsp;&nbsp;<a>果汁机</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>排油烟机</a>&nbsp;&nbsp;&nbsp;&nbsp;<a>豆浆机</a>
	    		
	    	</div>
	    	<div class="product-middle">
	    		<span>实力商家</span>
	    	    <hr style="height:3px;border:none;border-top:3px dashed #c9c3ad;" /> 
	    		&nbsp;&nbsp;<a>海尔</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;<a>三星</a>&nbsp;&nbsp;&nbsp;&nbsp;|<a>飞利浦</a>
	    		&nbsp;&nbsp;<a>九阳</a>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;<a>海信</a>
	    		
	    	</div>
    	
    </div>	
<!--    <script>
    	function showProductcategory(cid){
    		$("div.productcategory[cid="+cid+"]").show();
    	}
    	function hideProductcategory(cid){
    		$("div.productcategory[cid="+cid+"]").hide();
    	}
    	$("div.eachcategory").mouseenter(function(){
    		var cid=$(this).attr("cid");
    		showProductcategory();
    	});
    	$("div.eachcategory").mouseleave(function(){
    		var cid=$(this).attr("cid");
    		hideProductcategory();
    	});
    	
    	$("div.productcategory").mouseenter(function(){
    		var cid=$(this).attr("cid");
    		showProductcategory();
    	});
    	$("DIV.productcategory").mouseleave(function(){
    		var cid=$(this).attr("cid");
    		hideProductcategory();
    	});
    </script>
	-->
	<div class="right-gift">
	    <div class="right-gift-up">
	   		 <span>商城头条</span>
       		 <br>
       		 <a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[特惠]商城爆品1分秒</a><br>
       		 <a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[公告]商城与长春市签署战略</a>
       		 <a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[公告]华北、华中部分地区配送延迟</a>
	    </div>
	   <div class="right-gift-down">
	   			<div class="ding">
                    <a href="#">
                        <img src="img/di.jpg">
                    </a>
                    <em>
                        Hi,小叮当<br>
                        <a href="#"><span>点击更多优惠活动</span></a>
                    </em><br>
                    	<button class="dlan">登录</button><br><br>
                       <a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[特惠]家电狂欢千元券，买一送</a>
                       <a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[公告]新疆，内蒙等地不包邮</a>
	   			</div>
	   </div>
	</div>
</div>

<!--今日推荐-->
<div class="nominate-all">
	<div class="nominate-1">
			<img src="img/2016.png"></img>
		<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今日<br>	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;推荐
	</div>
	<div class="nominate-2">
		<div class="nominate-left">
			<br><br><h4>真的有鱼</h4>
			<h5>开年福利篇</h5>
		</div>
		<div class="nominate-right">
			<a href="#"><img src="img/tj.png"></img></a>
		</div>
	</div>
	<div class="nominate-2">
		<div class="nominate-left">
			<br><br><h4>囤货过冬</h4>
			<h5>让爱早回家</h5>
		</div>
		<div class="nominate-right">
			<a href="#"><img src="img/tj1.png"></img></a>	
		</div>
	</div>
	<div class="nominate-2">
		<div class="nominate-left">
			<br><br><h4>浪漫情人节</h4>
			<h5>甜甜蜜蜜</h5>
		</div>
		<div class="nominate-right">
	    	<a href="#"><img src="img/tj2.png"></img></a>	
		</div>
	</div>			
</div>
<!--促销活动-->
<div class="foot">
	<div class="foot-nav">
		<h4>&nbsp;&nbsp;&nbsp;&nbsp;活动</h4>
		<h3>&nbsp;&nbsp;|每期活动优惠享不停</h3>
		<span class="foot-navall"><a href="#">全部活动>></a></span>
	</div>
	
	<div class="foot-m">
		<a href="#"><img src="img/activity.jpg"></img></a>
		<div class="foot-m-font">春节送礼优选</div>
	</div>
	<div class="foot-m">
	    <a href="#"><img src="img/activity1.jpg"></img>	</a>
	    <div class="foot-m-font">春节送礼优选</div>
	</div>
	<div class="foot-m">
	   <a href="#"><img src="img/activity2.jpg"></img></a>
	   <div class="foot-m-font">春节送礼优选</div>
	</div>
	<div class="foot-m">
		<a href="#"><img src="img/activity3.jpg"></img></a>
		<div class="foot-m-font">春节送礼优选</div>
	</div>
</div>

<div class="footer">
		<!--<a><span>商城首页</span></a><a><span>支付宝</span></a><a><span>物流</span></a><span>时光购物商场</span><hr>-->
		<div class="footer-up">
			<a href="#"><img src="img/ensure.png"/></a>
		</div>
		<div class="footer-down">

	         <div class="footer-down-5">
	        	 <span class="footer-down-5tip">购物指南</span>
	        	 <a href="#">免费注册</a>
	        	 <a href="#">开通支付宝</a>
	        	 <a href="#">支付宝充值</a>
	         </div>
	         <div class="footer-down-5">
	             <span class="footer-down-5tip">时光保障</span>
	             <a href="#">发票保障</a>
	        	 <a href="#">售后规则</a>
	        	 <a href="#">缺货赔付</a>
	         </div>
	         <div class="footer-down-5">
	         	 <span class="footer-down-5tip">支付方式</span>
	             <a href="#">快捷支付</a>
	        	 <a href="#">蚂蚁花呗</a>
	        	 <a href="#">信用卡</a>
	        	 <a href="#">货到付款</a>
	         </div>
	         <div class="footer-down-5">
	         	 <span class="footer-down-5tip">商家服务</span>
	             <a href="#">商家入驻</a>
	        	 <a href="#">商家中心</a>
	        	 <a href="#">运营服务</a>
	         </div>
	         <div class="footer-down-5">
	         	 <span class="footer-down-5tip">时光商场</span>
	             <a href="#"><img src="img/Timely.png"/></a>
	         </div>
		</div>
		<div class="footer-end">
			<div class="footer-end-up">
				<a href="#">关于时光</a>
				<a href="#">帮助中心</a>
				<a href="#">开放平台</a>
				<a href="#">诚聘英才</a>
				<a href="#">联系我们</a>
				<a href="#">法律申明</a>
				<a href="#">知识产权</a>
				<a href="#" v>廉政举报</a>
			</div>
			<div class="footer-end-down">
				<a href="#">阿里巴巴集团</a><span class="flash">|</span>
				<a href="#">淘宝网</a><span class="flash">|</span>
				<a href="#">天猫</a><span class="flash">|</span>
				<a href="#">聚划算</a><span class="flash">|</span>
				<a href="#">全球速卖通</a><span class="flash">|</span>
				<a href="#">阿里旅行·去啊</a><span class="flash">|</span>
				<a href="#">阿里云计算 </a><span class="flash">|</span>
				<a href="#">阿里妈妈</a><span class="flash">|</span>
				<a href="#">万网 </a><span class="flash">|</span>
				<a href="#">高德</a><span class="flash">|</span>
				<a href="#">优步</a><span class="flash">|</span>
				<a href="#">虾米</a><span class="flash">|</span>
				<a href="#">钉钉</a><span class="flash">|</span>
				<a href="#">优视</a><span class="flash">|</span>
				<a href="#">网易</a><span class="flash">|</span>
				<a href="#">支付宝</a><span class="flash">|</span>			
			</div>
            <div class="license">
				<span>增值电信业务经营许可证： 浙BXXXX</span>
				<span>网络文化经营许可证：XXXX号</span>
				<span>互联网医疗保健信息服务XXXX </span><br>
				<span>互联网药品信息服务资质证书编号：XXXX</span><br>
			    <div class="copyRightYear">© 2017-2018 SG.COM 版权所有</div>
		    </div>
		</div>

</div>	
	</body>
</html>
